<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>讲授人选择菜单</title>
        <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
        <script src="../../script/aui-tab.js"></script>
    </head>
    <style>
        .marginTop {
            margin-top: 0.1rem;
        }
        #tabStyle {
            width: 50%;
            margin-left: 0.2rem;
        }
        .ImgSelectBody {
            width: 7rem;
            height: 7rem;
        }
        .ImgUploadtBody {
            width: 6rem;
            height: 5rem;
            margin: 0 auto;
        }
    </style>
    <body>
        <header class="aui-bar aui-bar-nav" id="aui-header">
            <div class="aui-pull-left aui-btn" onclick="close_win();">
                <span class="aui-iconfont aui-icon-left"></span>返回
            </div>
        </header>

        <div class="aui-grid marginTop">
            <div class="aui-tab" id="tabStyle">
                <div class="aui-tab-item aui-active">
                    <div></div>
                    <i class="aui-iconfont aui-icon-camera" style="font-size: 1rem; margin-right: 0.5rem"></i>用户自定义
                </div>
                <div class="aui-tab-item">
                    <i class="aui-iconfont aui-icon-image" style="font-size: 1rem; margin-right: 0.5rem"></i>讲授人选择
                </div>
            </div>
        </div>

        <div id="NarratorBody">
            <div class="aui-grid">
                <div class="aui-row">
                    <div class="aui-col-xs-2 FaceRelative">
                        <div class="FaceBottom">
                            <img src="../../image/findface.png" alt="" id="faceStyle" onclick="ImgAudioClick()" />
                            <p>请选择喜欢的人物</p>
                        </div>
                    </div>
                    <div class="aui-col-xs-1"></div>
                    <div class="aui-col-xs-8">
                        <div class="aui-row">
                            <div class="aui-col-xs-5">
                                <img src="http://172.16.32.194/setting/1.png" alt="" class="ImgSelectBody" />
                            </div>
                            <div class="aui-col-xs-5">
                                <img src="http://172.16.32.194/setting/2.png" alt="" class="ImgSelectBody" />
                            </div>
                        </div>

                        <div class="aui-row">
                            <div class="aui-col-xs-5">
                                <img src="http://172.16.32.194/setting/3.png" alt="" class="ImgSelectBody" />
                            </div>
                            <div class="aui-col-xs-5">
                                <img src="http://172.16.32.194/setting/4.png" alt="" class="ImgSelectBody" />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div id="RoleBody">
            <div class="aui-grid">
                <div class="aui-row">
                    <div class="aui-col-xs-3"></div>
                    <div class="aui-col-xs-4">
                        <img
                            src="http://172.16.32.194/setting/8.jpg"
                            alt=""
                            class="ImgUploadtBody"
                            onclick="profile_select();"
                        />
                        <p>请上传讲授人照片</p>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>
<script>
    apiready = function () {
        document.getElementById("RoleBody").style.display = "block";
        document.getElementById("NarratorBody").style.display = "none";
    };
    var tab = new auiTab(
        {
            element: document.getElementById("tabStyle"),
        },
        function (ret) {
            if (ret.index == 1) {
                document.getElementById("NarratorBody").style.display = "none";
                document.getElementById("RoleBody").style.display = "block";
            } else if (ret.index == 2) {
                document.getElementById("NarratorBody").style.display = "block";
                document.getElementById("RoleBody").style.display = "none";
            }
        }
    );

    function close_win() {
        api.openWin({
            name: "UserNameMain",
            url: "./UserNameMain.html",
            reload: true,
        });
    }
    function profile_select() {
        api.actionSheet(
            {
                title: "",
                cancelTitle: "取消",
                buttons: ["拍摄", "从本机相册选择"],
            },
            function (ret, err) {
                var index = ret.buttonIndex;
                if (index == 1) {
                    var has = hasPermissionObj("camera");
                    if (!has || !has[0] || !has[0].granted) {
                        api.confirm(
                            {
                                title: "提醒",
                                msg: "没有获得 " + "相机" + " 权限\n是否前往设置？",
                                buttons: ["去设置", "取消"],
                            },
                            function (ret, err) {
                                if (1 == ret.buttonIndex) {
                                    reqPermission("camera");
                                }
                            }
                        );
                        return false;
                    } else {
                        api.getPicture(
                            {
                                sourceType: "camera",
                                encodingType: "jpg",
                                mediaValue: "pic",
                                destinationType: "url",
                                allowEdit: true,
                                quality: 100,
                                saveToPhotoAlbum: false,
                            },
                            function (ret, err) {}
                        );
                    }
                } else if (index == 2) {
                    var has = hasPermissionObj("storage");
                    if (!has || !has[0] || !has[0].granted) {
                        api.confirm(
                            {
                                title: "提醒",
                                msg: "没有获得 " + "存储空间" + " 权限\n是否前往设置？",
                                buttons: ["去设置", "取消"],
                            },
                            function (ret, err) {
                                if (1 == ret.buttonIndex) {
                                    reqPermission("storage");
                                }
                            }
                        );
                        return false;
                    } else {
                        api.getPicture(
                            {
                                sourceType: "library", //图片库
                                encodingType: "jpg",
                                mediaValue: "pic",
                                destinationType: "url",
                                allowEdit: true,
                                quality: 100,
                                saveToPhotoAlbum: false,
                            },
                            function (ret, err) {}
                        );
                    }
                }
            }
        );
    }
    function reqPermission(one_per, callback) {
        var perms = new Array();
        if (one_per) {
            perms.push(one_per);
        } else {
            perms = ["library", "camera"];
        }
        api.requestPermission(
            {
                list: perms,
                code: 100001,
            },
            function (ret, err) {
                if (callback) {
                    callback(ret);
                    return;
                }
                var str = "请求结果：\n";
                str += "请求码: " + ret.code + "\n";
                str += '是否勾选"不再询问"按钮: ' + (ret.never ? "是" : "否") + "\n";
                str += "请求结果: \n";
                var list = ret.list;
                for (var i in list) {
                    str += list[i].name + "=" + list[i].granted + "\n";
                }
                console.log(JSON.stringify(ret));
            }
        );
    }

    function hasPermissionObj(one_per) {
        var perms = new Array();
        if (one_per) {
            perms.push(one_per);
        } else {
            perms = ["library", "camera"];
        }
        var rets = api.hasPermission({
            list: perms,
        });
        if (!one_per) {
            return;
        }
        return rets;
    }

    //     api.actionSheet({
    //     title: '头像设置',
    //     cancelTitle: '取消',
    //     buttons: ['从本机相册选择', '拍摄']
    //   }, function(ret, err) {
    //     var index = ret.buttonIndex;
    //     if(index ==1){
    //       api.getPicture({
    //           sourceType: 'library',
    //           encodingType: 'jpg',
    //           mediaValue: 'pic',
    //           destinationType: 'base64',
    //           allowEdit: true,
    //           quality: 100,
    //           targetWidth: 1000,
    //           targetHeight: 1000,
    //           saveToPhotoAlbum: false
    //       }, function(ret, err) {
    //           var tmp = ret;
    //           if (ret.data) {
    //                 local_avatar_info = ret.data;
    //                 var imageCrop = api.require('imageCrop');
    //                       imageCrop.clipPhoto({
    //                           imgPath: ret.data,
    //                           height: 300,
    //                           width: 300
    //                       }, function(ret, err) {
    //                           if (ret) {
    //                           $api.byId('user-info-avatar').src = ret.imgPath;
    //                           local_avatar_info = ret.imgPath;
    //                           } else {
    //                           }
    //                       });
    //         } else {
    //         }
    //       });
    //     }else if(index ==2){
    //       api.getPicture({
    //           sourceType: 'camera',
    //           encodingType: 'jpg',
    //           mediaValue: 'pic',
    //           destinationType: 'url',
    //           allowEdit: true,
    //           quality: 100,
    //           saveToPhotoAlbum: false
    //       }, function(ret, err) {
    //           if (ret.data) {
    //               local_avatar_info = ret.data;
    //               if (ret.data) {
    //                     var imageCrop = api.require('imageCrop');
    //                           imageCrop.clipPhoto({
    //                               imgPath: ret.data,
    //                               height: 300,
    //                               width: 300
    //                           }, function(ret, err) {
    //                               if (ret) {
    //                               $api.byId('user-info-avatar').src = ret.imgPath;
    //                               local_avatar_info = ret.imgPath;
    //                               } else {
    //                               }
    //                           });
    //             }
    //           } else {
    //           }
    //       });
    //     }
    //   });
</script>
